<!--
 * @Author: Jackie
 * @Date: 2021-01-03 20:23:58
 * @LastEditors: Jackie
 * @LastEditTime: 2021-01-07 23:16:48
 * @Description: 专利申请指标-组件
 * @FilePath: \temp-project\src\components\PatentApplyTarget.vue
-->
<template>
<div class="ApplyTarget">
    <div class="header">专利申请指标</div>
    <div class="chart">
        <!-- 使用SVG仿制环形图 -->
        <div class="box">
            <div class="targetIcon">
                <svg width="71" height="71" viewBox="0 0 71 71" xmlns="http://www.w3.org/2000/svg" class="svgpie">
                <defs>
                    <linearGradient id="blue_green" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" style="stop-color:#27bf52;stop-opacity:1"></stop>
                        <stop offset="100%" style="stop-color:#057089;stop-opacity:1"></stop>
                    </linearGradient>
                </defs>
                <circle cx="35"  cy="35" r= "30" fill="#273161" stroke="black"></circle>
                <circle class="progress" r="30" cy="35" cx="35" 
                stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill="none" 
                stroke-dashoffset="0px"   transform="rotate(-90, 35, 35)"
                />   
                <text x="50%" y="50%" class="txt" id="txt" dy=".3em"  >320</text>
                </svg>  
            </div>
            <div>年度目标</div>
        </div>
        <!-- <div class="applyIcon"></div><div>已申请</div>
        <div class="finshIcon"></div><div>完成度</div> -->
    </div>
    <div class="tab">
        <table>
                  <!-- <tr>
                      <th v-for='(item,ind) in columnList' :key="ind">{{item}}</th>
                  </tr> -->
                  <tr v-for='(item,index) in inforList' :key="index" class="ApplyTargetChart">
                      <td  v-for='(it,ind) in columnList' :key="ind">{{item[it]}}</td>
                  </tr>
            </table>
    </div>
</div>
  
</template>

<script>
const echarts = require('echarts');
export default {
    data(){
        return{
            colorList:['#3AFF24','#3194F3','#F8672F','#A42CEC','#23FFC9','#FF27BE','#FEFC22'],
            columnList: ['板块', '',],
            inforList: [
                    {'板块': '电力板块', '': 43},
                    {'板块': '石油板块', '': 0},
                    {'板块': '煤炭板块', '': 100},
                    {'板块': '天然气板块', '': 100},
                    {'板块': '可再生板块', '': 0},

                    ],
        }
    },
    mounted(){
      this.TargetChart()//table里插入div，仿制条形图
      this.pie()   //使用SVG仿制环形图
      },
    methods:{
     pie(){
      //svg仿制环形图，添加"进度属性"
      const progress = document.querySelector(".progress");
      const r=progress.r.baseVal.value//获取圆形的半径
      const num=66//进度值
      const perimeter=Math.PI*2*r//计算周长
      progress.style.strokeDasharray = `${Math.round(num*perimeter/100,2)}, ${Math.round(perimeter,2)}`;//计算虚线
      console.log(perimeter);
      },
    TargetChart(){
            let totalColor=''
            let tmpWidth=180
            let rt='10px',rb='10px'
            let color1="#92d639",color2="#06a3d3"

            const ApplyTargetChart=document.querySelectorAll('.ApplyTargetChart')
             ApplyTargetChart.forEach((item,index)=>{
                 const num=this.inforList[index]['']
                 if(num==0){
                     totalColor='',color1='',color2='',tmpWidth=0,rt='10px',rb='10px'
                     }
                 else if(num==100){
                     totalColor='#06a3d3',color1='#92d639',color2='#06a3d3',tmpWidth=180,rt='0px';rb='0px'
                     }
                 else{
                     totalColor='',color1='#92d639',color2='#06a3d3',tmpWidth=num/100*180,rt='10px',rb='10px'
                     }
                console.log(rt,rb,color1,color2);

                                  

                const tmp=item.childNodes[1]
                tmp.innerHTML= `
                <div style="width: 220px;height: 32px; display: flex;flex-direction: row;justify-content: space-between;align-items: center;
                
                ">
                    <div style="
                    width:200px;
                    height:15px;
                    background:black;
                    border-top-left-radius:10px;
                    border:2.5px solid black;
                    border-bottom-left-radius:10px;
                    "></div>
                    <div style="
                    width:64px;
                    height:29px;
                    background:black;
                    border:3px solid black;
                    border-radius:10px;
                    "></div>
                </div>
                

                <div style="width: 220px;height: 32px; display: flex;flex-direction: row;justify-content: space-between;align-items: center;
                position: absolute;top:50%;left:0%;transform: translate(0%,-50%);
                ">
                    <div style="
                    width:${tmpWidth}px;
                    height:10px;
                    background:linear-gradient(to right,${color1} 0%,${color2} 100%); 
                    background: -webkit-linear-gradient(to right, ${color1} 0%,${color2} 100%); 
                    background: -o-linear-gradient(to right, ${color1} 0%, ${color2} 100%); 
                    background: -moz-linear-gradient(to right, ${color1} 0%,${color2}100%);
                    border-top-left-radius:10px;
                    border-bottom-left-radius:10px;
                    border-top-right-radius:${rt};
                    border-bottom-right-radius:${rb};
                    padding-right:10px;
                    "></div>
                    <div style="width:64px;height:27px;background:${totalColor}; border-radius:10px; text-align: center;line-height: 27px; ">
                    ${num}%
                    </div>
                </div>
                `
             })


        }
    }

}
</script>

<style lang="less" scoped>
.ApplyTarget{ 
    width: 360px;height: 407px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--bgc--);
     border-radius: 10px;
     .header{
        width: 3.875rem;//310px
        height: .625rem;//50px
        text-align: start;
        line-height: .625rem;
        color: var(--textColor--);
        font-family: "NotoSansHans-Light";
        font-weight: 300;
        font-size: .2625rem;//21px
        border-bottom: 2px solid black;
     }
     .chart{
         width: 3.875rem;//310px
         height: 1.625rem;//130px
         border: 1px solid yellowgreen;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: flex-start;
         .box{
             flex: 1;
         }
     }
    .tab{
       width: 336px;height: 204px; 
        padding: 5px;
       font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    table{
        width: 100%;
        height: 100%;
    }
     td:nth-child(1){
        text-align: start;
        padding-right: 10px;
    }
    td:nth-child(2){
        width: 220px;
        position: relative;
    }
.progress{stroke: url(#blue_green);}
 text { 
   text-anchor: middle; 
   pointer-events: auto; 
   fill: #fff;
   font-size: .21875rem;//17.5px; 
   font-family: 'Franklin Gothic Medium';
   font-weight: lighter;
   } 
}
</style>